<template>
    <div  class="pagination-container">
        <el-pagination
        :background="background"
        :current-page="page"
        :page-size="size"
        :layout="layout"
        :page-sizes="pageSizes"
        :total="total"
        v-bind="$attrs"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script  setup lang="ts">
const props = defineProps({
    total: {
        required: true,
        type: Number
    },
    page: {
        type: Number,
        default: 1
    },
    size: {
        type: Number,
        default: 10
    },
    pageSizes: {
        type:  Array as ()=> Array<number>,
        default() {
            return [10, 20, 30, 50]
        }
    },
    layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
        type: Boolean,
        default: true
    },
    autoScroll: {
        type: Boolean,
        default: true
    }
})

const emit = defineEmits(['pagination','remove','update:page','update:size'])
const handleSizeChange = (val:any) => {
    emit('update:size', val)
    emit('pagination', { page: props.page, size: val })
}
const handleCurrentChange = (val:any) => {
    emit('update:page', val)
    emit('pagination', { page: val, size: props.size })
}
</script>

<style lang="scss" scoped>
.pagination-container {
    padding: 20px 16px 0px 16px;
    display: flex;
    justify-content: center;
}
</style>